{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票结果 - {{ question.question_text }}</title>
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="{% static 'polls/tomjerry-theme.css' %}">
</head>
<body class="tomjerry-body">
    <div class="container tomjerry-theme">
        <h1>{{ question.question_text }}</h1>

        <div class="results-container">
            <!-- 总票数显示 -->
            <div class="total-votes-display">
                <span class="paw-icon">🐾</span>
                总票数: <span class="total-number">{{ total_votes }}</span>
                <span class="paw-icon">🐾</span>
            </div>

            <!-- 投票结果列表 -->
            <ul class="results-list">
                {% for choice_data in choices_data %}
                <li>
                    <div class="choice-info">
                        <span class="choice-text">{{ choice_data.choice.choice_text }}</span>
                        <span class="choice-votes">{{ choice_data.choice.votes }} 票 ({{ choice_data.percentage|floatformat:1 }}%)</span>
                    </div>
                    <div class="vote-bar-container">
                        <div class="vote-bar" data-percent="{{ choice_data.percentage }}" data-color="{{ choice_data.color }}"></div>
                        <div class="cheese-icon">🧀</div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>

        <div class="action-buttons">
            <a href="{% url 'polls:detail' question.id %}" class="vote-button">重新投票</a>
            <a href="{% url 'polls:index'%}" class="back-link">返回投票列表</a>
        </div>
    </div>

    <footer class="tomjerry-footer">
        <div class="footer-content">
            <div class="copyright">
                &copy; 2025 投票系统，保留所有权利。
            </div>
            <div class="footer-links">
                <a href="/">首页</a>
                <a href="/admin">管理后台</a>
                <a href="https://gitee.com/cdg6666/django">关于我们</a>
                <a href="https://gitee.com/cdg6666/django">联系方式</a>
            </div>
        </div>
    </footer>

    <script>
        // 动态设置投票进度条宽度
        document.addEventListener('DOMContentLoaded', function() {
            const voteBars = document.querySelectorAll('.vote-bar');
            voteBars.forEach(bar => {
                const percent = bar.dataset.percent;
                const color = bar.dataset.color || '#f39c12';
                bar.style.width = percent + '%';
                bar.style.backgroundColor = color;
            });
        });
    </script>
</body>
</html>